<template>
    <div class="content">
      <div class="pageLeft">
        <div class="pageTitle">空瓶回收</div>
        <div class="searchBox">
          <input type="text" placeholder="请输入" v-model="goodsNameSearch">
          <div @click="GetEmptyBottleList()">搜索</div>
        </div>

        <div class="goodsContent">
          <div class="goodsTitle">
            <div v-for="(item,index) in EmptyBottleList" :key="index" @click="goodsTypes(index)" :class="{ goodsTypeA: BottleTypeIndex == index }">{{ item.typeName }}</div>
          </div>
          <div class="goodsList">
            <div class="goodsItem" v-for="(item,index) in BottleTypeGoods" :key="index" @click="waitRecovery(item)">
              <img v-if="item.mainAttachment" :src="item.mainAttachment">
              <img v-else src="https://oss.jtmckj.com/backend/Organize/wlmrt.png">
              <div>{{ item.goodsName }}</div>
            </div>
          </div>
        </div>

        <div class="book-footer">
              <el-pagination
                  background
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  v-model:currentPage="currentPage"
                  :page-size="18"
                  layout="  prev, pager, next, jumper"
                  :total="18"
              ></el-pagination>
              <!-- <button class="footer-button">确定</button> -->
          </div>
      </div>

      <div class="pageRight">
        <div class="infoTitle">回收详情</div>
        <div class="userInfo">
          <div class="formItem"><span>桌号：</span><input type="text" v-model="tableData.name" @click="allTableSelectShow = true"></div>
          <div class="formItem">
            <span>回收人：</span>
            <el-select v-model="WaiterItem" placeholder="请选择" value-key="userCode" clear-icon=".elSelect" class="waiterItem" :suffix-icon="IconDropDown">
                <el-option
                    v-for="item in WaiterList"
                    :key="item.userCode"
                    :label="item.userName"
                    :value="item"
                ></el-option>
            </el-select>
          </div>
        </div>
        <div class="remark"><div>备注：</div><textarea cols="30" rows="2" v-model="tableRemark"></textarea></div>

        <div class="infoTitle">空瓶信息</div> 
        <div class="bottleTop">
          <div>酒瓶名</div>
          <div>数量(瓶)</div>
          <div>操作</div>
        </div>
        <div class="bottleList">
          <div class="bottleItem" v-for="(item,index) in recoveryList" :key="index">
            <div>{{ item.goodsName }}</div>
            <div><input type="text" v-model="item.recoveryQty" @click="editCount(index)" :class="{countActive : ListIndex == index}"></div>
            <span @click="delItem(index)">删除</span>
          </div>
        </div>
        <div class="digital-bottom">
          <div class="digital">
            <div @click="Num('1')">1</div>
            <div @click="Num('2')">2</div>
            <div @click="Num('3')">3</div>
            <div @click="Num('4')">4</div>
            <div @click="Num('5')">5</div>
            <div @click="Num('.')">·</div>
            <div @click="Num('6')">6</div>
            <div @click="Num('7')">7</div>
            <div @click="Num('8')">8</div>
            <div @click="Num('9')">9</div>
            <div @click="Num('0')">0</div>
            <div @click="item.storeDay = item.storeDay.slice(0,item.storeDay.length -1)"><img src="https://jtmc.oss-cn-hangzhou.aliyuncs.com/pc/images/wine/del.png" alt=""></div>
        </div>

        <div class="confirm" @click="OpCoveryWine">确认</div>
        </div>

      </div>
    </div>
    <AllTableSelect v-model="allTableSelectShow" @cancel="allTableSelectShow = false" @confirm="selectTable" />
  </template>
  
  <script setup>
    import Api from '@/api'
    import AllTableSelect from '@/views/components/AllTableSelect.vue'
    import IconDropDown from '@/components/Icon/IconDropDown.vue';
import { nextTick } from 'vue'

    const BottleTypeGoods = ref('')
    const BottleTypeIndex = ref(0)
    const goodsTypes = (index) => {
      BottleTypeIndex.value = index
      BottleTypeGoods.value = EmptyBottleList.value[index].typeGoods
    }
    //桌台号
    const allTableSelectShow = ref(false)
    const tableData = ref('')
    const selectTable = (data) => {
      if (data.name) {
          console.log(data);
          tableData.value = data
          allTableSelectShow.value = false
      } else {
          ElNotification({
              title: '提示',
              message: '请选择桌号',
              type: 'warning',
          })
      }
    }
    // 获取服务员列表
    const WaiterItem = ref('')
    const WaiterList = ref([])

    const getWaiterList = () => {
        Api.Common.PcObjProcess.Do({"functionName":"getWaiterList","contentData":""})
        .then(res=>{
            console.log(res.result)
            WaiterList.value = res.result
            // WaiterItem.value = WaiterList.value[0].userName
        })
    }
    //确认回收操作
    const tableRemark = ref('')
    const OpCoveryWine = () => {
      let contentData = {
        memberMobile: "",
        roomCode: tableData.value.code,
        images: "",
        coveryUserCode: WaiterItem.value.userCode,
        coveryUserName: WaiterItem.value.userName,
        depotCode: "",
        depotName: "",
        remark: tableRemark.value,
        goods: []
      }
      let goodsType = {type:"0"}
      recoveryList.value.map(e => {
        Object.assign(e,goodsType)
        contentData.goods.push(e)
      })
      contentData.goods = JSON.stringify(contentData.goods)
      // return
      Api.Common.PcObjProcess.Do({functionName:"OpCoveryWine",orgCode: "0004",contentData})
      .then(res=>{
        console.log(res)
        tableData.value = ''
        WaiterItem.value = ''
        tableRemark.value = ''
        recoveryList.value = []
        alert('回收成功')
      })
    }
    //获取空瓶列表
    const EmptyBottleList = ref('')
    const goodsNameSearch = ref('')
    const GetEmptyBottleList = () => {
      Api.Common.PcObjProcess.Do({functionName:"GetEmptyBottleList",contentData:{goodsName: goodsNameSearch.value}})
      .then(async res=>{
        await nextTick()
        console.log(res.result)
        BottleTypeIndex.value = 0
        if(res.result.length > 0){
          EmptyBottleList.value = res.result
          BottleTypeGoods.value = EmptyBottleList.value[0].typeGoods
        }else{
          EmptyBottleList.value = []
          BottleTypeGoods.value = ''
        }
      })
    }
    //添加待回收
    const recoveryList = ref([])
    const waitRecovery = (item) => {
      if(!item.recoveryQty){
        let a = {recoveryQty: '1'}
        Object.assign(item,a)
      }
      if(recoveryList.value.length < 1){
        recoveryList.value.push(item)
      }else{
        let isRepeat = false
        recoveryList.value.map(e => {
          if(item.goodsCode == e.goodsCode){
            isRepeat = true
          }
        })
        if(isRepeat == false){
          recoveryList.value.push(item)
        }
      }
    }
    //删除
    const delItem = (index) => {
      delete recoveryList.value[index].recoveryQty
      ListIndex.value = '-1'
      recoveryList.value.splice(index,1)
    }
    //瓶子数量
    const Num = (num) => {
      if(ListIndex.value != '-1'){
        if(recoveryList.value[ListIndex.value].recoveryQty.length > 3){
          alert('商品数量超出上限')
        }else{
          recoveryList.value[ListIndex.value].recoveryQty += num
        }
      }else{
        alert('未选中任何商品')
      }
    }
    const ListIndex = ref('-1')
    const editCount = (index) => {
      console.log(index)
      ListIndex.value = index
    }
    const onInit = async () =>{
      GetEmptyBottleList()//获取空瓶列表
      getWaiterList()
    }
    onInit()
  </script>
  
  <style scoped lang="scss">
    *{
      color: #212121;
    }
    .book-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 14px;
    .footer-button {
        background: #ff6a00;
        border-radius: 8px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        font-size: 18px;
        color: #ffffff;
        line-height: 18px;
        padding: 15px 22px;
    }
    ::v-deep(.el-pager li:hover) {
        // width: 100%;
        color: #FF6A00;
    }
    ::v-deep(.el-pagination.is-background .el-pager li) {
        width: 48px;
        height: 48px;
        border-radius: 8px;
        background-color: #e6e6e6;
        font-size: 16px;
        // color: #212121;
    }
    ::v-deep(.el-pagination.is-background .el-pager li.is-active) {
        background-color: #ff6a00 !important;
        color: var(--el-color-white);
        font-size: 16px;
    }
    ::v-deep(.el-input__inner) {
        font-size: 16px;
    }
}
    .content{
      display: flex;
      justify-content: space-between;
      padding-right: 50px;
    }
    .pageLeft{
      width: 62%;
      .pageTitle{
        font-size: 24px;
        font-weight: bold;
      }
      .searchBox{
        display: flex;
        align-items: center;
        justify-content: space-between;
        background-color: #fff;
        border: 1px solid #FFD400;
        border-radius: 60px;
        overflow: hidden;
        box-sizing: border-box;
        padding: 5px;
        margin-top: 15px;
        input{
          font-size: 18px;
          width: 85%;
          box-sizing: border-box;
          padding: 0 30px;
        }
        div{
          font-size: 18px;
          background-color: #FFD400;
          border-radius: 60px;
          padding: 12px 0;
          width: 11%;
          text-align: center;
          cursor: pointer;
        }
      }

      .goodsContent{
        height: 640px;
        margin: 20px 0;
        background-color: #fff;
        border-radius: 10px;
        box-sizing: border-box;
        padding: 15px 30px;
        .goodsTitle{
          width: 900px;
          font-size: 20px;
          font-weight: bold;
          display: flex;
          align-items: center;
          flex-wrap: nowrap; 
          overflow-x: auto;
          div{
            white-space: nowrap;
            font-size: 18px;
            margin-right: 50px;
            cursor: pointer;;
            font-weight: 400;
          }
          .goodsTypeA{
            color: #FF6A00;
          }
        }
        .goodsTitle::-webkit-scrollbar { 
          width: 12px;
          height: 4px;
        }
  
        .goodsTitle::-webkit-scrollbar-track {
          background: #f1f1f1;
        }

        .goodsTitle::-webkit-scrollbar-thumb {
          background: #c1c1c1;
          border-radius: 10px;
        }
        .goodsList{
          margin-top: 20px;
          display: grid;
          grid-template-columns: repeat(6,15.2%);
          justify-content: space-between;
          grid-gap: 18px 0;
          .goodsItem{
            cursor: pointer;
            text-align: center;
            img{
              border-radius: 8px;
              width: 100%;
              height: 140px;
            }
            div{
              margin-top: 10px;
              font-size: 16px;
            }
          }
        }
      }
    }

    .pageRight{
      position: relative;
      width: 36.5%;
      height: 825px;
      box-sizing: border-box;
      padding: 0 15px;
      background-color: #fff;
      border-radius: 10px;
      .infoTitle{
        font-size: 24px;
        font-weight: bold;
        padding-top: 15px;
      }
      .userInfo{
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 20px;
        .formItem{
          width: 49%;
          display: flex;
          align-content: center;
          justify-content: space-between;
          span{
            font-size: 16px;
            width: 30%;
            text-align: right;
            // display: block;
            line-height: 50px;
          }
          input{
            width: 68%;
            height: 50px;
            border-radius: 10px;
            box-sizing: border-box;
            padding: 0 20px;
            font-size: 16px;
            background: #fff !important;
            border-radius: 8px !important;
            border: 1px solid #E6E6E6 !important;
          }
          ::v-deep(.waiterItem){
            width: 68%;
            background-color: #fff;
            height: 50px;
            border-radius: 10px;
            box-sizing: border-box;
            padding: 0 20px;
            font-size: 16px;
            border: 1px solid #E6E6E6 !important;
            .el-select__wrapper{
              height: 100%;
              background-color: #fff;
              box-shadow: 0 0 0 1px transparent inset !important;
            }
            .el-select__wrapper:hover{
              box-shadow: 0 0 0 1px transparent inset !important;
            }
            .el-select__wrapper.is-hovering:not(.is-focused){
              box-shadow: 0 0 0 1px transparent inset !important;
            }
            .el-select__wrapper.is-focused {
              box-shadow: 0 0 0 1px transparent inset !important;
            }
          }
        }
        
      }
      .remark{
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        margin-top: 20px;
        padding-bottom: 20px;
        border-bottom: 1px solid #E5E5E5;
        div{
          width: 15%;
          font-size: 16px;
          text-align: right;
          margin-top: 16px;
        }
        textarea{
          width: 84%;
          font-size: 16px;
          resize:none;
          background: #fff !important;
            border-radius: 10px !important;
            border: 1px solid #E6E6E6 !important;
          box-sizing: border-box;
          padding: 15px 20px;
          line-height: 1.5;
        }
      }
      .bottleTop{
        display: flex;
        align-items: center;
        background-color: #F9F9F9;
        border-radius: 10px;
        margin-top: 20px;
        div{
          width: 33.333%;
          text-align: center;
          font-size: 14px;
          color: #666666;
          padding: 15px 0;
        }
      }
      .bottleList::-webkit-scrollbar {     /* WebKit 浏览器 */
        display: none;
    }
      .bottleList{
        height: 200px;
        overflow-y: auto;
        padding-bottom: 10px;
        .bottleItem{
          display: flex;
          align-items: center;
          margin-top: 20px;
          div{
            font-size: 14px;
            width: 33.333%;
            text-align: center;
            input{
              width: 42%;
              border-radius: 6px;
              padding: 10px 0;
              font-size: 14px;
              text-align: center;
              background: #fff !important;
            border: 1px solid #E6E6E6 !important;
              cursor: pointer;
            }
          }
          span{
            font-size: 14px;
            width: 33.333%;
            text-align: center;
            color: #67C1FF;
            cursor: pointer;
          }
          .countActive{
            // background: #FF6A00; color: #fff;
          }
        }
      }
      .digital{
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 10px;
        background-color: #F9F9F9;
        box-sizing: border-box;
        padding: 15px 35px;
        border-radius: 10px;
        margin-top: 60px;
        div{
            cursor: pointer;
            width: 60px;
            height: 60px;
            border-radius: 5px;
            text-align: center;
            line-height: 40px;
            background-color: #E6E6E6;
            font-size: 18px;
            font-weight: bold;
            color: #212121;
            display: flex;
            align-items: center;
            justify-content: center;
            img{
                width: 35px;
                height: auto;
            }
        }
    }

    .confirm{
      text-align: center;
      background-color: #FF6A00;
      padding: 15px 0;
      font-size: 20px;
      margin-top: 20px;
      color: #fff;
      border-radius: 10px;
    }
    }
    .digital-bottom {
      padding-right: 15px;
      position: absolute;
      bottom: 20px;
    }
  </style>
  